<template>
  <el-form ref="form" label-position="right" :model="currentRow" label-suffix="："
           label-width="120px">

    <el-row>
      <el-col :span="8">
        <el-form-item label="是否临河">
          <el-radio-group v-model="currentRow.hasRiver">
            <el-radio-button v-for="item in EnumSysBooleanList" :key="item.code" :label="item.code">{{item.name}}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="16">
        <el-form-item label="临河地形" v-if="currentRow.hasRiver === 1">
          <el-radio-group v-model="currentRow.riverType">
            <el-radio-button v-for="item in EnumRiverTypeList" :key="item.code" :label="item.code">{{item.name}}
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item label="坡体类型">
      <el-radio-group v-model="currentRow.slopeType">
        <el-radio-button v-for="item in EnumSlopeTypeList" :key="item.code" :label="item.code">{{item.name}}
        </el-radio-button>
      </el-radio-group>
    </el-form-item>

    <!--  土质边坡 -->
    <div v-if="currentRow.slopeType === 1">
      <el-row>
        <el-col :span="14">
          <el-form-item label="土体类型">
            <el-radio-group v-model="currentRow.slopeItem.tuZhiItem.structureType">
              <el-radio-button v-for="item in EnumStructureTypeList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="其他说明"
                        v-if="currentRow.slopeItem.tuZhiItem.structureType && currentRow.slopeItem.tuZhiItem.structureType === 5">
            <el-input v-model="currentRow.slopeItem.tuZhiItem.structureTypeOther" clearable
                      placeholder="请描述其他土体类型"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="密实程度">
        <el-radio-group v-model="currentRow.slopeItem.tuZhiItem.miShiChengDu">
          <el-radio-button v-for="item in EnumMiShiChengDuList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="含水状态">
        <el-radio-group v-model="currentRow.slopeItem.tuZhiItem.hanShuiZhuangTai">
          <el-radio-button v-for="item in EnumHanShuiZhuangTaiList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="稠度状态">
        <el-radio-group v-model="currentRow.slopeItem.tuZhiItem.chouDuZhuangTai">
          <el-radio-button v-for="item in EnumChouDuZhuangTaiList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </div>
    <!--  岩质边坡 -->
    <div v-if="currentRow.slopeType === 2">
      <el-row>
        <el-col :span="12">
          <el-form-item label="岩体坚硬程度">
            <el-radio-group v-model="currentRow.slopeItem.yanZhiItem.jianYingChengDu">
              <el-radio-button v-for="item in EnumJianYingChengDuList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="岩体结构类型">
            <el-select v-model="currentRow.slopeItem.yanZhiItem.jieGouLeiXing" clearable placeholder="请选择">
              <el-option
                v-for="item in EnumJieGouLeiXingList"
                :key="item.code"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="外倾结构面倾角" label-width="140px">
            <el-radio-group v-model="currentRow.slopeItem.yanZhiItem.jieGouQingJiao">
              <el-radio-button v-for="item in EnumJieGouMianQingJiaoList" :key="item.code" :label="item.code">
                {{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="结构面结合程度" label-width="140px">
            <el-radio-group  v-model="currentRow.slopeItem.yanZhiItem.jieHeChengDu">
              <el-radio-button v-for="item in EnumJieHeChengDuList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="结构面发育程度" label-width="140px">
        <el-radio-group size="mini" v-model="currentRow.slopeItem.yanZhiItem.jieGouFaYu">
          <el-radio-button v-for="item in EnumJieGouMianFaYuList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="顺层边坡" label-width="140px">
        <el-radio-group  v-model="currentRow.slopeItem.yanZhiItem.shunCengBianPo">
          <el-radio-button v-for="item in EnumShunCengBianPoList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="是否易滑地层" label-width="140px">
            <el-radio-group  v-model="currentRow.slopeItem.yanZhiItem.shiFouYiHua">
              <el-radio-button v-for="item in EnumShiFouYiHuaList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他说明"
                        v-if="currentRow.slopeItem.yanZhiItem.shiFouYiHua && currentRow.slopeItem.yanZhiItem.shiFouYiHua === 3">
            <el-input v-model="currentRow.slopeItem.yanZhiItem.shiFouYiHuaOther" clearable
                      placeholder="请描述其他"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </div>
    <!--  填方边坡 -->
    <div v-if="currentRow.slopeType === 3">
      <el-row>
        <el-col :span="10">
          <el-form-item label="填方材料">
            <el-radio-group v-model="currentRow.slopeItem.tianFangItem.tianFangCaiLiao">
              <el-radio-button v-for="item in EnumTianFangCaiLiaoList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="基底条件">
            <el-radio-group v-model="currentRow.slopeItem.tianFangItem.jiDiTiaoJian">
              <el-radio-button v-for="item in EnumJiDiTiaoJianList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="填挖交界面或岩土接触面与坡向关系" label-width="250px">
        <el-radio-group v-model="currentRow.slopeItem.tianFangItem.structureSide">
          <el-radio-button v-for="item in EnumStructureSideList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="控制性层面">
        <el-radio-group v-model="currentRow.slopeItem.tianFangItem.kongZhiCengMian">
          <el-radio-button v-for="item in EnumKongZhiCengMianList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </div>
    <div v-if="currentRow.slopeType !==3 ">
      <el-divider content-position="left">坡后情况</el-divider>
      <el-row>
        <el-col :span="10">
          <el-form-item label="坡后角度">
            <el-input v-model="currentRow.poHouItem.poHouJiao" clearable placeholder="请输入数字">
              <template slot="prepend"><span style="font-size: 15px">实测角度</span></template>
              <template slot="append"><span style="font-size: 15px">°</span></template>
            </el-input>
          </el-form-item>
          <el-form-item label="坡后高度">
            <el-input v-model="currentRow.poHouItem.poHouHeight" clearable placeholder="请输入数字">
              <template slot="prepend"><span style="font-size: 15px">实测高度</span></template>
              <template slot="append"><span style="font-size: 15px">m</span></template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="目测">
            <el-radio-group v-model="currentRow.poHouItem.poHouJiaoWatch">
              <el-radio-button v-for="item in EnumPoHouJiaoWatchList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="目测">
            <el-radio-group v-model="currentRow.poHouItem.poHouHeightWatch">
              <el-radio-button v-for="item in EnumPoHouHeightWatchList" :key="item.code" :label="item.code">{{item.name}}
              </el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="坡后植被">
        <el-radio-group v-model="currentRow.poHouItem.poHouPlant">
          <el-radio-button v-for="item in EnumPoHouPlantList" :key="item.code" :label="item.code">{{item.name}}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </div>

  </el-form>
</template>
<script>

import ItemMixins from "./item.mixins";
import Enums from '@/utils/enums'

export default {
  props: ['value', 'isLook'],
  mixins: [ItemMixins,Enums],
  data() {
    return {
      EnumSlopeTypeList: [],
      EnumMiShiChengDuList: [],
      EnumStructureTypeList: [],
      EnumSysBooleanList: [],
      EnumRiverTypeList: [],
      EnumHanShuiZhuangTai: [],
      EnumChouDuZhuangTaiList: [],
      EnumHanShuiZhuangTaiList: [],
      EnumJianYingChengDuList: [],
      EnumJieGouMianFaYuList: [],
      EnumJieGouLeiXingList: [],
      EnumJieGouMianQingJiaoList: [],
      EnumJieHeChengDuList: [],
      EnumShiFouYiHuaList: [],
      EnumShunCengBianPoList: [],
      EnumTianFangCaiLiaoList: [],
      EnumJiDiTiaoJianList: [],
      EnumKongZhiCengMianList: [],
      EnumStructureSideList: [],
      EnumPoHouHeightWatchList: [],
      EnumPoHouJiaoWatchList: [],
      EnumPoHouPlantList: [],
    }
  },
  computed: {
    currentRow: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    number() {
      this.currentRow.slopeLevel = this.currentRow.slopeLevel.replace(/[^\.\d]/g, '');
      this.currentRow.slopeLevel = this.currentRow.slopeLevel.replace('.', '');
    },
    // 内部表单校验
    _validatorForm() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          valid && resolve()
        })
      })
    }
  },
  mounted() {
    this.queryDictList(['EnumPoHouHeightWatch','EnumPoHouPlant','EnumPoHouJiaoWatch','EnumKongZhiCengMian', 'EnumJiDiTiaoJian', 'EnumTianFangCaiLiao', 'EnumJieGouMianFaYu', 'EnumJieGouLeiXing', 'EnumJieGouMianQingJiao', 'EnumJieHeChengDu', 'EnumShiFouYiHua', 'EnumShunCengBianPo', 'EnumJianYingChengDu', 'EnumChouDuZhuangTai', 'EnumHanShuiZhuangTai', 'EnumMiShiChengDu', 'EnumSlopeType', 'EnumStructureType', 'EnumSysBoolean', 'EnumRiverType', 'EnumStructureSide'],
      ['EnumPoHouHeightWatchList','EnumPoHouPlantList','EnumPoHouJiaoWatchList','EnumKongZhiCengMianList', 'EnumJiDiTiaoJianList', 'EnumTianFangCaiLiaoList', 'EnumJieGouMianFaYuList', 'EnumJieGouLeiXingList', 'EnumJieGouMianQingJiaoList', 'EnumJieHeChengDuList', 'EnumShiFouYiHuaList', 'EnumShunCengBianPoList', 'EnumJianYingChengDuList', 'EnumChouDuZhuangTaiList', 'EnumHanShuiZhuangTaiList', 'EnumMiShiChengDuList', 'EnumSlopeTypeList', 'EnumStructureTypeList', 'EnumSysBooleanList', 'EnumRiverTypeList', 'EnumStructureSideList']);
  }
}
</script>

<style lang="less">
  .form_compact {
    display: flex;

    & /deep/ .el-input input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    & /deep/ .el-button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  .el-button {
    padding-right: 40px;
  }

  .el-form-item__label {
    /*padding: 0px;*/
  }

  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .geology {
    font-size: 20px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;

  }

  .geology-children {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }
  .geology-children-type {
    font-size: 15px;
    border-bottom: 1px solid;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #1990FE;
    font-weight: 600;
  }
</style>
